﻿
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;}
tr, th, td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    background:transparent;}
body {
    line-height:1;}
:focus {
    outline: 1;}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
    display:block;}
nav ul {
    list-style:none;}
blockquote, q {
    quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;}
a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;}
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;}
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;}
del {
    text-decoration: line-through;}
abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;}
table {
    border-collapse:collapse;
    border-spacing:0;}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;}
input, select {
    vertical-align:middle;}
li{
    list-style:none;}

#HopeSlider{
    overflow: hidden;
    border-bottom:solid #1e498a;}
.dot-list{
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 5;
    margin-left: -88px;}
.dot-list .dot{
    display: inline-block;
    
    margin: 0 5px;
    background-color: #fff;
    border-radius: 5px;
    width:10px;
    height:10px;}
.dot-list .dot.active{
    background-color: #1e498a;
    color: #fff;}
#prev{
    position: absolute;
    left: -50px;
    top: 0;
    width: 50px;
    height: 100%;
    background: url(../images/slider/arl.png) no-repeat center;
    z-index: 5;}
#next{
    position: absolute;
    right: -50px;
    top: 0;
    width: 50px;
    height: 100%;
    background: url(../images/slider/arr.png) no-repeat center;
    z-index: 5;}
#prev,#next{
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
    cursor: pointer;}
#HopeSlider:hover #prev{
    left: 0;}
#HopeSlider:hover #next{
    right: 0;}
.animate{
    position: absolute;
    z-index: 2;}
}
#ie .animate{
    opacity: 1;}

.slidertext1{
    display:block;
    width: 479px;
    height: 134px;}
.slidertext2{
    display:block;
    width:862px;
    height:202px;}
.slidertext3{
    display:block;
    width: 809px;
    height: 90px;}
.slidertext4{
    display:block;
    width:362px;
    height:150px;}
.slidertext5{
    display:block;
    width:512px;
    height:69px;}
.slidertext6{
    display:block;
    width:505px;
    height:82px;}
.slidertext7{
    display:block;
    width: 381px;
    height: 191px;}
.slidertext1_768{
    display: none;}
.left-in{
    -webkit-animation: animate-left-in 3s cubic-bezier(.08,.8,0,.85);
    -o-animation: animate-left-in 3s cubic-bezier(.08,.8,0,.85);
    animation: animate-left-in 3s cubic-bezier(.08,.8,0,.85);
    animation-fill-mode: forwards;}
.left-out.animate{
    -webkit-animation: animate-left-out .7s;
    -o-animation: animate-left-out .7s;
    animation: animate-left-out .7s;
    animation-fill-mode: forwards;
    opacity: 1;}
.right-in{
    -webkit-animation: animate-right-in 3s cubic-bezier(.08,.8,.5,.85);
    -o-animation: animate-right-in 3s cubic-bezier(.08,.8,.5,.85);
    animation: animate-right-in 3s cubic-bezier(0.08,.8,.5,.85);
    animation-fill-mode: forwards;}
.right-out.animate{
    -webkit-animation: animate-right-out .7s;
    -o-animation: animate-right-out .7s;
    animation: animate-right-out .7s;
    animation-fill-mode: forwards;
    opacity: 1;}
@keyframes animate-left-in {
    0%{
        transform: translateX(-2560px);
        opacity: 1;}
    20%{
        transform: translateX(-800px);
        opacity: 1;}
    90%{
        transform: translateX(5px);
        opacity: 1;}
    100%{
        transform: translateX(0px);
        opacity: 1;}
}
@-webkit-keyframes animate-left-in {
    0%{
        transform: translateX(-2560px);
        opacity: 1;}
    20%{
        transform: translateX(-800px);
        opacity: 1;}
    90%{
        transform: translateX(5px);
        opacity: 1;}
    100%{
        transform: translateX(0px);
        opacity: 1;}
}
@keyframes animate-right-in {
    0%{
        transform: translateX(2560px);
        opacity: 1;}
    20%{
        transform: translateX(800px);
        opacity: 1;}
    90%{
        transform: translateX(-5px);
        opacity: 1;}
    100%{
        transform: translateX(0px);
        opacity: 1;}
}
@-webkit-keyframes animate-right-in {
    0%{
        transform: translateX(2560px);
        opacity: 1;}
    20%{
        transform: translateX(800px);
        opacity: 1;}
    90%{
        transform: translateX(-5px);
        opacity: 1;}
    100%{
        transform: translateX(0px);
        opacity: 1;}
}
@keyframes animate-left-out {
    from{
        transform: translateX(0);
        opacity: 1;}
    to{
        transform: translateX(-2560px);
        opacity: 0;}
}
@-webkit-keyframes animate-left-out {
    from{
        transform: translateX(0);
        opacity: 1;}
    to{
        transform: translateX(-2560px);
        opacity: 0;}
}
@keyframes animate-right-out {
    from{
        transform: translateX(0);
        opacity: 1;}
    to{
        transform: translateX(2560px);
        opacity: 0;}
}
@-webkit-keyframes animate-right-out {
    from{
        transform: translateX(0);
        opacity: 1;}
    to{
        transform: translateX(2560px);
        opacity: 0;}
}

@media screen and (max-width:2561px) and (min-width:1921px){
.slidertext1{
    display: none;}
.slidertext1_768{
    display: block;
    width: 596px;
    height: 67px;
    transform: scale(1);}
.slidertext2{
     transform:scale(1);}
.slidertext3{
    
    transform:scale(1);}
.slidertext4{
    
    transform:scale(1.1);}
.slidertext5{
 
    transform:scale(1.4);}
.slidertext6{
 
     transform:scale(1.4);}
.slidertext7{
     transform:scale(1);}
.animate.type01{
    right: 28%;
    top: 22%;}
.animate.type02{
    left: 12%;
    top: 47%;}
.animate.type03{
    right: 23%;
    top: 47%;}
.animate.type04{
    right: 20%;
    top: 27%;}
.animate.type05{
    right: 25%;
    top: 36%;}
.animate.type06{
    right: 19%;
    top: 40%;}
.animate.type07{
    right: 38%;
    top: 33%;}}
@media screen and (max-width:1920px) and (min-width:1442px){
.slidertext1{
    display: none;}
.slidertext1_768{
    display: block;
    width: 596px;
    height: 67px;
    transform:scale(0.75);}
.slidertext2{
     transform:scale(0.75);}
.slidertext3{
    
transform:scale(0.75);}
.slidertext4{
    
    transform:scale(0.8);}
.slidertext5{
 
    transform:scale(0.95);}
.slidertext6{
 
     transform:scale(0.95);}
.slidertext7{}
.animate.type01{
    right: 22%;
    top: 23%;}
.animate.type02{
    left: 10%;
    top: 42%;}
.animate.type03{
    right: 5%;
    top: 50%;}
.animate.type04{
    right: 15%;
    top: 18%;}
.animate.type05{
    right: 17%;
    top: 30%;}
.animate.type06{
    right: 13%;
    top: 30%;}
.animate.type07{
    right: 37%;
    top: 28%;
    transform: scale(0.8);}}
@media screen and (max-width:1441px) and (min-width:1367px){
.slidertext1{
    display: none;}
.slidertext1_768{
    display: block;
    width: 596px;
    height: 67px;
    transform:scale(0.6);}
.slidertext2{
     transform:scale(0.6);}
.slidertext3{
    transform:scale(0.6);}
.slidertext4{
    
    transform:scale(0.6);}
.slidertext5{
 
    transform:scale(0.75);}
.slidertext6{
 
     transform:scale(0.75);}
.slidertext7{}
.animate.type01{
    right: 20%;
    top: 21%;}
.animate.type02{
    left: 8%;
    top: 40%;}
.animate.type03{
    right: 0%;
    top: 46%;}
.animate.type04{
    right: 13%;
    top: 10%;}
.animate.type05{
    right: 12%;
    top: 28%;}
.animate.type06{
    right: 8%;
    top: 30%;}
.animate.type07{
   right: 43%;
   top: 25%;
   transform: scale(.8);}}
@media screen and (max-width:1366px) and (min-width:1282px){
.slidertext1{
    display: none;}
.slidertext1_768{
    display: block;
    width: 596px;
    height: 67px;
    transform:scale(0.55);}
.slidertext2{
     transform:scale(0.55);}
.slidertext3{
    transform:scale(0.55);}
.slidertext4{
    
    transform:scale(0.6);}
.slidertext5{
 
    transform:scale(0.7);}
.slidertext6{
 
     transform:scale(0.7);}
.slidertext7{}
.animate.type01{
    right: 18%;
    top: 20%;}
.animate.type02{
    left: 1%;
    top: 34%;}
.animate.type03{
    right: 0%;
    top: 45%;}
.animate.type04{
    right: 10%;
    top: 15%;}
.animate.type05{
    right: 10%;
    top: 28%;}
.animate.type06{
    right: 8%;
    top: 30%;}
.animate.type07{
   right: 43%;
   top: 18%;
   transform: scale(.8);}}
@media screen and (max-width:1281px) and (min-width:1206px){
.slidertext1{
    display: none;}
.slidertext1_768{
    display: block;
    width: 596px;
    height: 67px;
    transform:scale(0.5);}
.slidertext2{
     transform:scale(0.5);}
.slidertext3{
    transform:scale(0.5);}
.slidertext4{
    
    transform:scale(0.5);}
.slidertext5{
 
    transform:scale(0.65);}
.slidertext6{
 
     transform:scale(0.65);}
.slidertext7{}
.animate.type01{
    right: 17%;
    top: 24%;}
.animate.type02{
    left: 3%;
    top: 37%;}
.animate.type03{
    right: -4%;
    top: 45%;}
.animate.type04{
    right: 10%;
    top: 15%;}
.animate.type05{
    right: 10%;
    top: 28%;}
.animate.type06{
    right: 6%;
    top: 30%;}
.animate.type07{
   right: 42%;
   top: 20%;
   transform: scale(.8);}}
@media screen and (max-width:1205px) and (min-width:1025px){
.slidertext1{
    display: none;}
.slidertext1_768{
    display: block;
    width: 596px;
    height: 67px;
    transform:scale(0.65);}
.slidertext2{
    transform:scale(0.65);}
.slidertext3{
    transform:scale(0.65);}
.slidertext4{
    
    transform:scale(0.7);}
.slidertext5{
 
    transform:scale(0.9);}
.slidertext6{
 
     transform:scale(0.9);}
.slidertext7{}
.animate.type01{
    right: 18%;
    top: 28%;}
.animate.type02{
    left: -8%;
    top: 37%;}
.animate.type03{
    right: -6.5%;
    top: 48%;}
.animate.type04{
    right: 7%;
    top: 20%;}
.animate.type05{
    right: 13%;
    top: 35%;}
.animate.type06{
    right: 9%;
    top: 35%;}
.animate.type07{
   right: 45%;
   top: 24%;}}
@media screen and (max-width:1024px) and (min-width:961px){
.slidertext1{
    display: none;}
.slidertext1_768{
    display: block;
    width: 596px;
    height: 67px;
    transform:scale(0.6);}
.slidertext2{
     transform:scale(0.6);}
.slidertext3{
    transform:scale(0.6);}
.slidertext4{
    
    transform:scale(0.6);}
.slidertext5{
 
    transform:scale(0.75);}
.slidertext6{
 
     transform:scale(0.75);}
.slidertext7{}
.animate.type01{
    right: 15.5%;
    top: 26%;}
.animate.type02{
    left: -9%;
    top: 36%;}
.animate.type03{
    right: 1%;
    top: 45%;}
.animate.type04{
    right: 3%;
    top: 15%;}
.animate.type05{
    right: 10%;
    top: 35%;}
.animate.type06{
    right: 3%;
    top: 37%;}
.animate.type07{
   right: 47%;
   top: 21%;
   transform: scale(.8);}}
@media screen and (max-width:960px) and (min-width:770px){
.slidertext1{
    display: none;}
.slidertext1_768{
    display: block;
    width: 596px;
    height: 67px;
    transform:scale(0.6);}
.slidertext2{
     transform:scale(0.6);}
.slidertext3{
    transform: scale(0.6);}
.slidertext4{
    
    transform:scale(0.6);}
.slidertext5{
 
    transform:scale(0.8);}
.slidertext6{
 
     transform:scale(0.8);}
.slidertext7{}
.animate.type01{
    right: 11%;
    top: 24%;}
.animate.type02{
    left: -11%;
    top: 28%;}
.animate.type03{
    right: -8.5%;
    top: 44%;}
.animate.type04{
    right: 1%;
    top: 85%;}
.animate.type05{
    right: 8%;
    top: 40%;}
.animate.type06{
    right: 3%;
    top: 63%;}
.animate.type07{
   right: 49%;
   top: 17%;
   transform: scale(.8);}}
@media screen and (max-width:769px) and (min-width:640px){
.slidertext1{
    transform:scale(0.8);}
.slidertext2{
     display:none;}
.slidertext2_768{
    display:block;
    width:443px;
    height:165px;
    transform:scale(0.8);}
.slidertext3_768{
    display: block;
    width: 409px;
    height: 125px;
    transform: scale(0.8);}
.slidertext3{
    display:none;}
.slidertext4{
    
    transform:scale(0.6);}
.slidertext5{
 
    transform:scale(0.65);}
.slidertext6{
 
     transform:scale(0.65);}
.slidertext7{}
.animate.type01{
    right: -3%;
    top: 27%;}
.animate.type02{
    left: 2%;
    top: 34%;}
.animate.type03{
    right: 5%;
    top: 43%;}
.animate.type04{
    right: -6%;
    top: 10%;}
.animate.type05{
    right: 1%;
    top: 30%;}
.animate.type06{
    right: 5%;
    top: 35%;}
.animate.type07{
   right: 58%;
   top: 25%;
   transform: scale(.8);}}
@media screen and (max-width:639px) and (min-width:500px){
.slidertext1{
    transform:scale(0.8);}
.slidertext2{
     display:none;}
.slidertext2_768{
    display:block;
    width:443px;
    height:165px;
    transform:scale(0.8);}
.slidertext3_768{
    display: block;
    width: 409px;
    height: 125px;
    transform: scale(0.8);}
.slidertext3{
    display:none;}
.slidertext4{
    
    transform:scale(0.6);}
.slidertext5{
 
    transform:scale(0.65);}
.slidertext6{
 
     transform:scale(0.65);}
.slidertext7{}
.animate.type01{
    right: -4%;
    top: 27%;}
.animate.type02{
    left: -4%;
    top: 32%;}
.animate.type03{
    right: -6%;
    top: 43%;}
.animate.type04{
    right: -6%;
    top: 10%;}
.animate.type05{
    right: 1%;
    top: 30%;}
.animate.type06{
    right: 5%;
    top: 35%;}
.animate.type07{
   right: 64%;
   top: 18%;
   transform: scale(.8);}
}
@media screen and (max-width:499px){
.animate{
    display:none;}
}

.slidertext2017{
    display: block;
    width: 1146px;
    height: 314px;}
.animate.type2017{
    right: 50%;
    top: 50%;
    margin-right: -685px;
    margin-top: -157px;}
@media screen and (max-width: 1920px) {
.animate.type2017{
    right: 50%;
    top: 50%;
    margin-right: -620px;
    margin-top: -140px;}
.slidertext2017{
    display: block;
    width: 960px;
    height: 236px;
    background-size: 86%;
    background-repeat: no-repeat;}
}
@media screen and (max-width: 1366px) {
    .animate.type2017{
    right: 50%;
    top: 50%;
    margin-right: -713px;
    margin-top: -95px;}
.slidertext2017{
       display: block;
    width: 960px;
    height: 236px;
    background-size: 65%;
    background-repeat: no-repeat;}
}
@media screen and (max-width: 1024px){
.animate.type2017{
    right: 50%;
    top: 50%;
    margin-right: -725px;
    margin-top: -88px;}
.slidertext2017{
    display: block;
    width: 960px;
    height: 236px;
    background-size: 60%;
    background-repeat: no-repeat;}
}
@media screen and (max-width: 768px){
    .slidertext2017{
    display: none;}
}